<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Example - NSTabMenu</title>
</head>
<body>
	<style>
		#tabmenu
		{
			background-color: #eee;
			width: 600px;
		}
		#tabmenu div
		{
			display: inline-block;
			width: 100px;
			height: 20px;
			text-align:center;
			padding-top:10px;
			border-radius: 5px 5px 0px 0px;
			border-color: #00f;
			border-style: solid;
			font-size: 11px;
		}
		#tabmenu .buttonUp
		{
			background-color: #eef;
		}
		#tabmenu .buttonDown
		{
			background-color: #e33;
		}
		#tabmenu .buttonSelected
		{
			background-color: #f0f;
		}
	</style>
   
    <div id="tabmenu">
    	<div>button1</div>
        <div>button2</div>
        <div>button3</div>
        <div>button4</div>
    </div>
    <script src="../com/NSTabMenu.js"></script>
    <script type="text/javascript">
		var _tabmenu = new NSTabMenu( document.getElementById( "tabmenu" ), "buttonUp", "buttonDown", "buttonSelected" );
		// 강제 설정
		_tabmenu.setSelectedIndex( 1 );
		// 이벤트 콜백
		_tabmenu.onChange = function( index )
		{
			console.log( "클릭된 인덱스 : [파라미터방식]" + index );
			console.log( "클릭된 인덱스 : [함수방식]" + _tabmenu.getSelectedIndex() );
		}
	</script>
</body>
</html>
